위 예제를 보시는 일반적으로 많이 사용되는 예제의 모습입니다. toggleClass()는 클릭 이벤트와 많이 사용되는데 동일한 클릭이 반복실행될 경우 스위치 효과인 토글 이벤트 효과를 나타내기 위해 사용할 수 있습니다
위 예제의 .p태그는 class명 red를 가지고 있습니다. 그리고 스크립트를 실행하게 되면 red 클래스명은 이미 있기 때문에 가지고 있던 red 클래스명은 삭제됩니다. 만약 위 함수를 다시 실행하면 red 클래스명이 없기 때문에 다시 나타나게 됩니다. 실행 결과는 아래와 같습니다.
Class name red!
위 버튼을 직접 클릭해보세요.
# toggleClass()는 언제 사용해야 하는가?
사실 자바스크립트에서 특정 요소에 스타일을 직접 추가하거나 제거할 수 있습니다. 예를들어...
<script> $('testEle').css('color', 'red'); // 스크립트를 사용한 변경 예제 </script>
하지만 스타일과 스크립트를 명확히 구분하여 코드를 작성하는 것이 좋기 때문에 가급적 toggleClass()를 사용해 스타일은 CSS에서 변경할 수 있도록 분리 후 사용하는 것이 좋은 방법입니다. 게다가 스크립트에 스타일을 사용할 경우 코드가 길어져 가독성 역시 좋지 않습니다.